<template>
  <div class="conversion-form-field">
    <el-row :gutter="10">
      <el-col :span="5" class="status">
        <div class="grid-content bg-purple">
          <label for="needUpdate">需要更新:</label>
          <el-select
            v-model="needUpdate"
            name="needUpdate"
            placeholder="所有"
            clearable
            size="medium"
            popper-class="b-select"
          >
            <el-option value="1" label="是" />
            <el-option value="0" label="否" />
          </el-select>
        </div>
      </el-col>
      <!-- <el-col :span="5" class="status">
        <div class="grid-content bg-purple">
          <label for="sortMode">排序字段:</label>
          <el-select
            v-model="sortField"
            name="sortMode"
            placeholder="所有"
            clearable
            size="medium"
            popper-class="b-select"
          >
            <el-option value="0" label="日期" />
            <el-option value="1" label="产品" />
            <el-option value="2" label="颜色" />
          </el-select>
        </div>
      </el-col>
      <el-col :span="5" class="status">
        <div class="grid-content bg-purple">
          <label for="sortMode">排序方式:</label>
          <el-select
            v-model="sortord"
            name="sortMode"
            placeholder="所有"
            clearable
            size="medium"
            popper-class="b-select"
          >
            <el-option value="1" label="升序" />
            <el-option value="0" label="降序" />
          </el-select>
        </div>
      </el-col> -->
      <!-- <el-col :span="8" class="update-time">
        <label for="updateTime">更新时间:</label>
        <el-date-picker
          v-model="updateTime"
          name="updateTime"
          type="daterange"
          size="medium"
          range-separator="-"
          value-format="YYYY-MM-DD"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-col> -->
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <label for="product">产品名称:</label>
          <el-select
            v-model="product"
            name="product"
            placeholder="请选择产品(可多选)"
            multiple
            filterable
            clearable
            default-first-option
            no-match-text="不存在该选项"
            size="medium"
            popper-class="b-select"
          >
            <el-option
              v-for="productItem in productList"
              :key="productItem.value"
              :label="productItem.label"
              :value="productItem.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <label for="color">产品颜色:</label>
          <el-select
            v-model="color"
            name="color"
            placeholder="请选择颜色(可多选)"
            multiple
            filterable
            clearable
            default-first-option
            no-match-text="不存在该选项"
            size="medium"
            popper-class="b-select"
          >
            <el-option
              v-for="colorItem in colorList"
              :key="colorItem.value"
              :label="colorItem.label"
              :value="colorItem.value"
              seletced
            />
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button type="primary" size="small" @click="screen">查询</el-button>
        <el-button size="small">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: '',
      product: '',
      needUpdate: '',
      sortField: '',
      sortord: '',
      updateTime: [],
      screenData: {},
      // props: [
      //   productList: {
      //     type: Array
      //   }
      // ],

      productList: [
        { label: '01', value: '1' },
        { label: '02', value: '2' },
        { label: '03', value: '3' },
        { label: '04', value: '4' },
        { label: '05', value: '5' },
        { label: '06', value: '6' },
        { label: '07', value: '7' },
        { label: '09', value: '9' },
        { label: '10', value: '10' },
        { label: '11', value: '11' },
        { label: '12', value: '12' },
        { label: '13', value: '13' },
        { label: '14', value: '14' }
      ],
      colorList: [
        { label: '灰色', value: '1' },
        { label: '黑色', value: '2' },
        { label: '白色', value: '3' },
        { label: '深灰色', value: '4' },
        { label: '银色', value: '5' },
        { label: '铁灰色', value: '6' }
      ]
    }
  },

  methods: {
    screen() {
      const screenData = {
        color: this.color,
        product: this.product,
        needUpdate: this.needUpdate,
        sortField: this.sortField,
        sortord: this.sortord
      }

      console.log(screenData)
    }
  }
}

</script>
<style lang="scss" scoped>
  .el-row {
    margin: 18px 0;
  }
  label {
    margin-right: 8px;
    font-size: 14px;
  }
  [class*="el-col-"] {
    text-align: left;
  }
  .b-select {
    width: 100%;
  }
  .el-select {
    width: 80%;
  }
  .status .el-select {
    width: 60%;
  }
  .create-time .el-date-editor,
  .update-time .el-date-editor {
    width: 81%;
  }
  .title .el-input {
    width: 79%;
  }
</style>
